<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}
    </style>
</head>
<!-- 注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。 -->
<body>
    p>以下实例图在父元素中溢出，很不美观:</p>

    <div>
    <img class="img1" src="img/兔子.jpg" alt="Pineapple" width="170" height="170">
    菜鸟教程 - 学的不仅是技术，更是梦想！！！</div>
    
    <p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>
    
    <div class="clearfix">
    <img class="img2" src="img/兔子3.jpg" alt="Pineapple" width="170" height="170">
    菜鸟教程 - 学的不仅是技术，更是梦想！！！</div>
      
</body>
</html>